<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V视界-个人页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/common.css}" href="../../static/css/common.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/iconfont01.css}" href="../../static/css/iconfont01.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/personalPage.css}" href="../../static/css/personalPage.css">

    <link rel="stylesheet" type="text/css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
          href="../../static/customAlertConfirm/customAlertConfirm.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/replymask.css}" >
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/publishBlog.css}" >
</head>

<body>
<div th:replace="~{hot::#model}"></div>
<div th:replace="~{home::tip-off}"></div>
<div th:replace="~{home::more-reply-mask}" ></div>
<div th:replace="~{unlogin::mask}"></div>
<div class="publishBlogBox hidden" th:fragment="publishBlogBox">
    <div class="publishBlog">
        <p>发布微博</p>
        <i class="iconfont publishCancel">&#xe650;</i>
        <form
                class="blogPubForm"
                enctype="multipart/form-data"
        >
          <textarea
                  name="text"
                  id="publishBlogArea"
                  cols="30"
                  rows="10"
                  placeholder="分享日常,发表看法..."
          ></textarea>
            <div class="imagePreview">
                <div class="imagePreviewContainer"></div>
            </div>
            <div class="imageUpload">
                <button
                        type="button"
                        class="addImageButton"
                >
                    添加图片
                </button>
                <input
                        type="file"
                        id="imageInput"
                        accept="image/*"
                        name="myFiles"
                        style="display: none"
                        multiple="multiple"
                />
            </div>
            <div class="blogBottom">
                <div class="bottomBox">
                    <i class="iconfont">&#xe8ba;</i><span>图片</span>
                    <div id="imageInputs"></div>
                </div>
                <div class="bottomBox">
                    <i class="iconfont">&#xe8b1;</i><span>话题</span>
                    <input name="label" id="label" placeholder="为您的微博添加标签" />
                </div>
                <div class="bottomBox">
                    <i class="iconfont">&#xe7f9;</i><span>类别</span>
                    <div id="categorySelects">
                    </div>
                </div>
            </div>
            <button class="publish">发布</button>
        </form>
    </div>
</div>
<div class="top" th:fragment="top">
    <div id="top">
        <!-- logo -->
        <div id="logo-search">
            <div class="logo">
                <img src="../../static/img/logo.png" th:src="@{/static/img/logo.jpg}" alt="" />
            </div>
            <div class="top-search" th:replace="~{home::topSearch}">
                <span><i class="iconfont">&#xe623;</i></span>
                <input type="text" placeholder="请输入搜索内容" id="top-input" />
            </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn">
            <div class="home  fn">
                <a class="icon" href="home.html" th:href="@{/blog/getMyConnectionBlog(msg='登录成功')}"
                ><i class="iconfont">&#xe625;</i></a
                >
            </div>
            <div class="hot fn">
                <a class="icon" href="hot.html" th:href="@{/blog/getIndexBlog(state=2)}"
                ><i class="iconfont">&#xe628;</i></a
                >
            </div>
            <div class="message fn">
                <a class="icon" href="message.html" th:href="@{/user/getOthersCommentOfMe}"
                ><i class="iconfont">&#xe908;</i></a
                >
            </div>
            <div class="private border fn">
                <a class="icon" href="personalPage.html" th:href="@{/my/toMyInfo}"
                ><i class="iconfont">&#xe60a;</i></a
                >
            </div>
        </div>
        <!-- 登录，设置等-->
        <div class="access" th:replace="home::access">
        </div>
    </div>
</div>
<div id="content">
    <div class="list">
        <ul>
            <a  th:if="${color}" th:href="@{/my/toMyInfo}">
                <span><i class="iconfont">&#xe7c6;</i></span>
                我的主页
            </a>
            <a  th:unless="${color}" class="color" th:href="@{/my/toMyInfo}">
                <span><i class="iconfont">&#xe7c6;</i></span>
                我的主页
            </a>
            <a th:href="@{/my/toMyIdols}">
                <span><i class="iconfont">&#xe65d;</i></span>
                我的关注
            </a>
            <a th:href="@{/my/toMyFans}">
                <span><i class="iconfont">&#xe648;</i></span>
                我的粉丝
            </a>
            <a th:href="@{/my/toMyLike}">
                <span><i class="iconfont">&#xe694;</i></span>
                我的点赞
            </a>
            <a th:href="@{/my/toMyCollection}">
                <span><i class="iconfont">&#xe647;</i></span>
                我的收藏
            </a>
            <a th:href="@{/my/echoMyMessage}" methods="post">
                <span><i class="iconfont">&#xe626;</i></span>
                修改信息
            </a>
            <a th:href="@{/personalPage-pswdChange}">
                <span><i class="iconfont">&#xe64b;</i></span>
                修改密码
            </a>
        </ul>
    </div>
    <div id="news">
        <div class="userInfo" th:uid="${user.id}">
            <div>
                <img th:src="@{/static/img/banner.jpg}" src="../../static/img/banner.jpg" class="bcgdImg" alt="用户背景图">
            </div>
            <div class="InfoDetails">
                <script th:inline="javascript">
                    let userInfo=[[${user}]]
                    console.log(userInfo)
                </script>
                <img th:src="@{${user.avatarUrl}}" src="../img/defaultAvatar.png" class="headPhoto">
                <div class="nameBox">
                    <div class="name"><span th:text="${user.username}" >用户名称</span></div>
                    <div class="fans-follow">
                        <div class="fansNumber">粉丝:<span th:text="${fansNum}">0</span></div>
                    <div class="followNumber">关注:<span th:text="${idolsNum}">0</span></div></div>

                </div>
                <div class="personal-attention" th:if="${color}" ><button class="per-attention-btn" th:uid="${user.id}"><i class="iconfont">&#xe7df;</i>关注</button></div>
                <div class="otherInfo">
                    <div class="perSign">个性签名:<span th:text="${user.label}">暂未设置个性签名</span></div>
                    <div class="gender">性别:<span th:text="${user.sex}">暂未设置性别</span></div>
                    <div class="address">住址:<span th:text="${user.address}">暂未设置地址</span></div>
                    <div class="age">年龄:<span th:text="${user.age}">暂未设置年龄</span></div>
                    <div class="address">邮箱地址:<span th:text="${user.email}"></span></div>
                </div>
            </div>
        </div>
       <div class="titleBox">
           <h5 class="newsTitle" >全部微博</h5>
       </div>
<!--        <div class="textBox hidden">-->
<!--            暂无内容-->
<!--        </div>-->
 <div class="allnews">
     <div class="news" th:each="myBlog:${myBlog}" th:bid="${myBlog.id}" th:uid="${myBlog.uid}" >
     <div th:if="${myBlog.isMy==0}">
         <div class="news-top">
             <a class="head-link">
                 <div class="head">
                     <img
                             alt="发布者头像"
                             class="blogHeadPhoto"
                             th:src="@{${myBlog.myInfo.avatarUrl}}"
                     />
                 </div>
             </a>
             <div class="top-details">
                 <a href="" class="name" >
                     <p class="userName" th:text="${myBlog.myInfo.username}">发布者名称</p>
                 </a>
                 <p class="time" th:text="${myBlog.time}">3-18</p>
             </div>
             <div class="report-remove " >
                 <div class="rm-icon" th:bid="${myBlog.id}" th:otherid="${user.id}" onclick="reportfn(this)"><i class="iconfont">&#xe62e;</i></div>
                 <ul class="rm-detials hidden">
                     <li class="tip-off-li" th:bid="${myBlog.id}">投诉</li>
                     <li class="remove-li" onclick="removeBlog(this)" th:bid="${myBlog.id}" >删除</li>

                 </ul>
             </div>
         </div>
         <div class="news-container">
             <a class="color" th:if="${!(myBlog.label=='')}" th:href="@{/blog/skipToBlog(label=${myBlog.label})}" th:text="'#'+${myBlog.label}+'#'"></a>
             <span class="blogText" th:text="${myBlog.text}">
                    文字内容
                </span>
             <div class="news-content">
                 <div class="news-content-img"  th:each="img:${myBlog.pictureUrl}">
                     <img th:src="@{${img}}" src="../../static/img/logo.jpg" alt="" onclick="showModel(this)">
                 </div>
             </div>
         </div>
         <div class="foot">
             <div class="share">
                 <i class="iconfont">&#xe62f;</i>
                 <span class="shareNum" th:text="${myBlog.transmit}>0?${myBlog.transmit}:'分享'">0</span>
             </div>
             <div class="assess" th:bid="${myBlog.id}">

                 <i class="iconfont">&#xe695;</i>
                 <span class="commentNum" th:text="${myBlog.comment}>0?${myBlog.comment}:'评论'">0</span>
                 </a>
             </div>
             <!--                <div class="store">-->
             <!--                    <i class="iconfont">&#xe647;</i>-->
             <!--                    <span>收藏</span>-->
             <!--                </div>-->
             <div class="like">
                 <i class="iconfont">&#xe62b;</i>
                 <span class="likesNum" th:text="${myBlog.likes}>0?${myBlog.likes}:'点赞'">12</span>
             </div>
         </div>
         <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
             <span class="comment-ddl">还可输入140字</span>
             <button class="comment-btn disable">评论</button>
             <div class="comment" >
                 <div class="item1" >
                     <div class="comment-list">
                         <a href="">
                             <div class="comment-head">
                                 <img
                                         src="../../static/img/banner.jpg"
                                         th:src="@{/static/img/banner.jpg}"
                                         alt=""
                                 />
                             </div>
                         </a>
                         <div class="comment-details">
                             <a href="" class="comment-name"> <span >XXX</span> </a>:
                             <span class="c-content" >11111111111111111111</span>
                             <div class="comment-bottom">
                                 <div class="c-time">3-18</div>
                                 <div class="comment-fn">
                                     <div class="c-complain">
                                         <i class="iconfont">&#xe6a9;</i>
                                     </div>
                                     <div class="reply">
                                         <i class="iconfont">&#xe695;</i>
                                     </div>

                                     <div class="c-like">
                                         <i class="iconfont">&#xe600;</i>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="list2">
                     <div class="list2-bar"></div>
                     <div class="list2-details">
                         <a href="" class="list2-name"><span>XXX:</span></a>
                         <span class="list2-content">1111111111</span>
                     </div>
                     <div class="list2-bottom">
                         <div class="list2-time">3-18</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div th:if="${myBlog.isMy==1}">
         <div class="news-top">
             <a class="head-link">
                 <div class="head">
                     <img
                             alt="发布者头像"
                             class="blogHeadPhoto"
                             th:src="@{${myBlog.myInfo.avatarUrl}}"
                     />
                 </div>
             </a>
             <div class="top-details" >
                 <a href="" class="name" >
                     <p class="userName" th:text="${myBlog.myInfo.username}">发布者名称</p>
                 </a>
                 <p class="time" th:text="${myBlog.transmitTime}">3-18</p>
             </div>
             <div class="report-remove " >
                 <div class="rm-icon" th:bid="${myBlog.id}" th:otherid="${session.id}" onclick="reportfn(this)"><i class="iconfont">&#xe62e;</i></div>
                 <ul class="rm-detials hidden">
                     <li class="tip-off-li" th:bid="${myBlog.id}">投诉</li>
                     <li class="remove-li" onclick="removeBlog(this)" th:bid="${myBlog.id}" >删除</li>
                 </ul>
             </div>

         </div>
         <p style="margin-left: 75px">转发微博</p>

         <div class="transBlogContent" style="background-color: #f6f8fa;margin-top: 20px">
             <div class="content-top" style="margin-left: 55px">
                 <div class="top-details">
                     <a th:href="@{/user/toOnesInfo(id=${myBlog.uid})}" class="name">
                         <p class="userName" th:text="${myBlog.otherInfo.username}" style="font-size: 15px">发布者名称</p>
                     </a>
                     <p class="time" th:text="${myBlog.time}">3-18</p>
                 </div>
             </div>
             <div class="news-container">
                 <a class="color" th:if="${!(myBlog.label=='')}" th:href="@{/blog/skipToBlog(label=${myBlog.label})}" th:text="'#'+${myBlog.label}+'#'"></a>
                 <span class="blogText" th:text="${myBlog.text}">
                    文字内容
                </span>
                 <div class="news-content">
                     <div class="news-content-img"  th:each="img:${myBlog.pictureUrl}">
                         <img th:src="@{${img}}" src="../../static/img/logo.jpg" alt="" onclick="showModel(this)">
                     </div>
                 </div>
             </div>
         </div>
         <div class="foot">
             <div class="share">
                 <i class="iconfont">&#xe62f;</i>
                 <span class="shareNum" th:text="${myBlog.transmit}>0?${myBlog.transmit}:'分享'">0</span>
             </div>
             <div class="assess" th:bid="${myBlog.id}">

                 <i class="iconfont">&#xe695;</i>
                 <span class="commentNum" th:text="${myBlog.comment}>0?${myBlog.comment}:'评论'">0</span>
                 </a>
             </div>
             <!--                <div class="store">-->
             <!--                    <i class="iconfont">&#xe647;</i>-->
             <!--                    <span>收藏</span>-->
             <!--                </div>-->
             <div class="like">
                 <i class="iconfont">&#xe62b;</i>
                 <span class="likesNum" th:text="${myBlog.likes}>0?${myBlog.likes}:'点赞'">12</span>
             </div>
         </div>
         <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
             <span class="comment-ddl">还可输入140字</span>
             <button class="comment-btn disable">评论</button>
             <div class="comment" >
                 <div class="item1" >
                     <div class="comment-list">
                         <a href="">
                             <div class="comment-head">
                                 <img
                                         src="../../static/img/banner.jpg"
                                         th:src="@{/static/img/banner.jpg}"
                                         alt=""
                                 />
                             </div>
                         </a>
                         <div class="comment-details">
                             <a href="" class="comment-name"> <span >XXX</span> </a>:
                             <span class="c-content" >11111111111111111111</span>
                             <div class="comment-bottom">
                                 <div class="c-time">3-18</div>
                                 <div class="comment-fn">
                                     <div class="c-complain">
                                         <i class="iconfont">&#xe6a9;</i>
                                     </div>
                                     <div class="reply">
                                         <i class="iconfont">&#xe695;</i>
                                     </div>

                                     <div class="c-like">
                                         <i class="iconfont">&#xe600;</i>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="list2">
                     <div class="list2-bar"></div>
                     <div class="list2-details">
                         <a href="" class="list2-name"><span>XXX:</span></a>
                         <span class="list2-content">1111111111</span>
                     </div>
                     <div class="list2-bottom">
                         <div class="list2-time">3-18</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div></div>



        <p class="none hidden" >没有更多内容了</p>
    </div>
    <div id="right-bar" th:replace="~{hot-search::#right-bar}">
        <div id="hot">
            <div class="hot-top">
                <div class="hot-top-content">
                    <p>热搜</p>
                </div>
                <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
            </div>
        </div>
        <a class="return-top" href="#">
            <i class="iconfont">&#xea7d;</i>
        </a>
    </div>
</div>



</div>
</body>
<script type="text/javascript" src="../../static/js/jquery3.7.1.min.js" th:src="@{/static/js/jquery3.7.1.min.js}"></script>

<script type="text/javascript" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
        src="../customAlertConfirm/customAlertConfirm.js"></script>
<script type="text/javascript" th:src="@{/static/js/personalPage.js}" src="../js/personalPage.js"></script>
<script type="text/javascript" th:src="@{/static/js/personalPage-publish.js}" src="../js/personalPage-publish.js"></script>
<script type="text/javascript" th:src="@{/static/js/replymask.js}" ></script>
<script type="text/javascript" th:src="@{/static/js/more.js}" ></script>
<script type="text/javascript" th:src="@{/static/js/common.js}" src="../../static/js/common.js"></script>

<script type="text/javascript" th:src="@{/static/js/hot-search.js}"></script>
<script type="text/javascript" th:src="@{/static/js/loadingMyBlog.js}"></script>
<script th:inline="javascript">
    const textBox = document.querySelector('.textBox');
    let none=document.querySelector(".none");
    let myBlog = [[${myBlog}]];
    if (myBlog.length <=0) {
        textBox.classList.remove('hidden')
        none.classList.add("hidden")
    }
    let alnews=document.getElementsByClassName("news");

    if(alnews.length==0){
        document.querySelector(".allnews").innerHTML=`<div class="news empty">暂无数据</div>`
    }
</script>

</html>